<!--
 @description 客户-跟进记录
 @fileName FollowRecord.vue
 @author zengqiongying
 @created 2022/11/11 13:11:55
-->
<template>
  <div class="followup-record">
    <List
      ref="list"
      class="c-list-scroll"
      :finished.sync="finished"
      :reset-fun="resetData"
      :load="load"
      :refresh="load"
      :default-active="true"
    >
      <div v-for="(item,i) in list" :key="i" class="record-item">
        <div class="dot" />
        <div class="item-wrap">
          <div class="item-title">{{ item.followUpUserTrueName || item.createBy }}：{{ item.createTime | filterTime }}</div>
          <div class="item-content" v-html="getHtmlContent(item)" />
          <template v-if="item.files && item.files.length>0">
            <div v-for="(a,index) in item.files" :key="index" class="file-item" @click="handlerClickFile(a)">
              {{ a.attachmentName }}
            </div>
          </template>
          <template v-if="item.voices && item.voices.length>0">
            <div v-for="(a,index) in item.voices" :key="index" class="voices">
              <span>语音备注：</span>
              <FieldAudio v-model="a.attachmentPath" read-only />
            </div>
          </template>
        </div>
      </div>
    </List>
  </div>
</template>

<script>
import FieldAudio from '@/components/FieldAudio'
import List from '@/components/List'
import mixin from './mixin'
import { followupRecordPage } from '@/apis/customer'
import { getDictByPatchType } from '@/apis/dataDict'
export default {
  name: 'CustomerFollowRecord',
  components: { FieldAudio, List },
  mixins: [mixin],
  data() {
    return {
      CRM_FOLLOW_UP_TYPE: [],
      list: [],
      finished: false // 列表是否加载完成
    }
  },
  computed: {
    filtersRaw() {
      return [
        { id: 'objectId', property: 'objectId', value: this.clueCustomerId, operator: '=' },
        { id: 'objectType', property: 'objectType', value: 'ClueCustomer', operator: '=' }
      ]
    }
  },
  created() {
    this.getDictData()
  },
  methods: {
    async getDictData() {
      const dictTypeCodes = ['CRM_FOLLOW_UP_TYPE']
      const data = await getDictByPatchType({ dictTypeCodes })
      this.CRM_FOLLOW_UP_TYPE = data && data.CRM_FOLLOW_UP_TYPE
    },
    getFollowTypeName(code) {
      if (!code || this.CRM_FOLLOW_UP_TYPE.length === 0) return ''
      const d = this.CRM_FOLLOW_UP_TYPE.find(v => v.dictCode === `${code}`)
      return (d && d.dictName) || ''
    },
    initData() {
      this.resetPageData()
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      const data = new FormData()
      data.append('page', page)
      data.append('rows', rows)
      data.append('filtersRaw', JSON.stringify(this.filtersRaw))

      const headers = {
        'Permission-PerCode': !this.isCommonCustomerPool ? 'my_customer_pool' : 'common_customer_pool',
        'Permission-App': 'top2-crm-app'
      }
      // TODO:是否权限待定
      return followupRecordPage(data, headers).then(res => {
        const records = res.data.records || []
        records.forEach(v => {
          if (v.voices && v.voices.length > 0) {
            v.voices.forEach(attr => {
              attr.attachmentPath = this.$formatURL(attr.attachmentPath)
            })
          }
        })
        if (page === 1) {
          this.$refs.list ? this.$refs.list.page = 1 : ''
          this.list = records
        } else {
          this.list.push(...records)
        }
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    handlerClickFile(f) {
      window.open(this.$formatURL(f.attachmentPath), '_blank')
    },
    getHtmlContent(item) {
      const name = this.getFollowTypeName(item.followUpType)
      // let content = item.followUpContent ? item.followUpContent.replace(/{\r\n|{/g, '{<br/>').replace(/\r\n}|}/g, '<br/>}').replace(/\r\n/g, '<br/>') : ''
      let content = item.followUpContent ? item.followUpContent.replace(/{\r\n|{/g, '<br/>').replace(/\r\n}|}/g, '<br/>').replace(/\r\n/g, '<br/>') : ''
      if (content.indexOf(name) === 0) {
        content = content.replace(`${name}：<br/>`, '')
      }
      // content = content.replace(/\[|]/g, '').replace(/\{|}/g, '')
      return name + `${name ? '：<br/>' : ''}` + content
    }
  }
}

</script>
<style lang='less' scoped>
  .followup-record{
    padding: 16px;
    .c-list-scroll{
      min-height: calc(35vh);
    }
    .record-item{
      position: relative;
      padding-left: 24px;
      margin-bottom: 20px;
      background: #fff;
      &::before{
        content: '';
        position: absolute;
        left: 4px;
        top: 0;
        bottom: -20px;
        border-left: dashed #16BC83 1px;
      }
      &:last-child{
        margin-bottom: 0;
        &::before{
          border-left: 0;
          bottom: 0;
        }
      }
      .dot{
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 9px;
        height: 26px;
        background: #fff;
        &::before{
          content: '';
          position:absolute;
          left: 0;
          top: 9px;
          width: 8px;
          height: 8px;
          background: #16BC83;
          border-radius: 50%;
        }
      }
    }
    .item-wrap{
      padding: 16px;
      background: #F8F8FA;
      border: 1px dashed #a3a3a3;
      .item-title{
        margin-bottom: 8px;
        min-height: 18px;
        line-height: 18px;
        color: #B5B7C4;
      }
      .item-content{
        line-height: 20px;
        font-size: 14px;
        color: #343640;
        .light{
          color: #16BC83;
        }
      }
    }
  }
  .voices{
    padding: 3px 0;
    display: flex;
    align-items: center;
  }
  .file-item{
    padding: 3px 0;
    line-height: 1.2;
  }
</style>
